<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>三等奖</title>
		<link rel="stylesheet" type="text/css" href="index.css"/>
		<style>
			#start{
			width:190px;
			position:absolute;
			left:350px;
			border:none;
			margin:20px;
			bottom:80px;
			background:transparent;
		}
		#start img,#again img{
			width:190px;
		}
		.prize-number span.normal {
		        font-size: 3em;
			    color: #fff;
			    display: inline-block;
			    margin: 25px 18px;
		}
		</style>
	</head>
	<body>
		<div class="container">
			<img class="background" src="img/thridbg.png"/>
			<div class="number">
				<span id="thousand">000</span>
			</div>
			<div class="prize">
				<!--<img src="img/grandprizeOff.png"/>
				<img id=""src="img/firstprizeOff.png"/>
				<img id="normal" src="img/normalprizeOff.png"/>
				<img id="third" src="img/thirdprizeOff.png"/>
				<img id="second" src="img/secondprizeOff.png"/>-->
				<!--<button id="grand" class="past"></button>
				<button id="first" class="past"></button>
				<button id="normal" class="past"></button>
				<button id="third" class="past"></button>
				<button id="second" class="past"></button>
				<button id="add" class="past"></button>-->
			</div>
			<div class="prize-number">
			</div>
			<button id="start">
				<!--<span>开始抽奖</span>-->
			 	<img src="img/greenbutton.png" alt="开始" />
			</button>
		</div>
		
		
		<!--<p><button id="clear">清除缓存</button></p>-->
		<script src="jquery-1.12.3.js"></script>
		<!--<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>-->
		<script src="commen.js"></script>
		<script>
			$(function(){
				var prize=JSON.parse(localStorage.pond);
				var n=prize.length-1;
				var index,winPrize;
				
				console.log(prize);
				console.log(n);
				$("#start").click(function(){
					$(this).attr("disabled",true);
					$("#start img").css("cursor","not-allowed");
					if(localStorage.third == "false"){
						$("div.prize-number").html("");
						console.log(localStorage.third)
						var i=0;
						start(25);
					}else if(localStorage.third == "true"){
						alert("三等奖已经抽过了");
						$("button.past").attr("disabled",false);
						$("#start").attr("disabled",false);
					}
				})
				function start(index){
					var number="",i=0;
					winPrize=JSON.parse(localStorage.winPrize)
					console.log(winPrize);
					timer2=setInterval(function(){
						number=parseInt(Math.random()*n);
						$("#thousand").text(prize[number]);
						if(i != 0 && i%100 == 0){
							console.log(isCon(winPrize,prize[number]));
							if(isCon(winPrize,prize[number]) == false){
								$(".prize-number").append("<span class='normal'>"+prize[number]+"</span>");
								winPrize.push(prize[number]);
								localStorage.winPrize = JSON.stringify(winPrize);
								index--;
								console.log("index="+index);
							}
						}
						if(index == 0){
							$("#start").attr("disabled",true);
							clearInterval(timer2);
							localStorage.third = "true"
						}
						i++;
						},30)
					}
				function isCon(arr,val){
					for(var i=0; i<arr.length; i++){
						if(arr[i] == val)
						return true;
						}
						return false;
				}
			})
		</script>
	</body>
</html>
